<template>
    <div class="top3" v-draggable-resizable="{
        storageKey: 'top3',
        controlPosition: 'top',
        hideHintText: '周榜前三',
        scaleStep: 0.1
    }">
        <!-- <div v-if="isLoading" class="loading-mask">
            <div class="loading-spinner"></div>
            <div class="loading-text">正在加载...</div>
        </div> -->
         <div class="top3-show" v-for="(item, index) in top3">
            <div class="badge-container">
                <div class="badge" :style="{ backgroundImage: `url(${getTop3Badge(index + 1)})` }">
                    <img class="player-avatar" :src="item.avatar || getDefaulteAvatar()" alt="头像" @error="handleAvatarError($event, item.avatar)">
                </div>
                <span class="player-name">{{item.player_name || '玩家名'}}</span>
            </div>
         </div>
    </div>
</template>

<script lang="ts" setup>
import { defineProps, watch, ref, onMounted } from 'vue';
import { handleAvatarError } from '@/utils/playerBox';

import getApi from '@/api/modules/get'

const props = defineProps({
    gameId: {
        type: Number,
        default: 1
    },
    leaderboardType: {
        type: String,
        default: 'game'
    },
    visible: {
        type: Boolean,
        default: false
    }
})

const top3 = ref();
const show = ref(true);
const isLoading = ref(false);
let t = null;

// 获取赛季排行榜数据
const fetchSeasonLeaderboard = async () => {
    try {
        clearInterval(t)
        const params: any = {
            game_id: props.gameId,
            limit: 3
        };
        isLoading.value = true
        const response = await getApi.getWeekLeaderboard(params);
        if (response.status == 200) {
            top3.value = response.data.data
        }
    } catch (error) {
        console.error('获取周排行榜失败:', error);
    } finally {
        isLoading.value = false
        polling()
    }
};


watch(() => [props.visible, props.gameId], (newValue, oldValue) => {
    if (!newValue.at(0) || newValue.at(1) != oldValue.at(1)) {
        fetchSeasonLeaderboard();
    }
})

const polling = () => {
    t = setInterval(() => {
        fetchSeasonLeaderboard();
    }, 60*1000)
}

function getDefaulteAvatar(): string {
    return new URL('../../assets/xinJi/images/leaderboard/avatar.png', import.meta.url).href
}

function getTop3Badge(imageName: Number) {
    return new URL(`../../assets/xinJi/images/top3/${imageName}.png`, import.meta.url).href
}

onMounted(() => polling())
</script>

<style lang="less" scoped>
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.top3 {
    position: relative;
    height: 100%;
    display: flex;

    .loading-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 10;
        color: white;

        .loading-spinner {
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 4px solid white;
            width: 36px;
            height: 36px;
            animation: spin 1s linear infinite;
            margin-bottom: 10px;
        }

        .loading-text {
            font-size: 14px;
        }
    }

    .top3-show {
        height: 185px;
        display: flex;
        align-items: end;
        margin: 0 5px;

        .badge-container {
            display: flex;
            flex-direction: column;
            align-items: center;

            .badge {
                height: 100px;
                width: 100px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                position: relative;

                .player-avatar {
                    height: 80px;
                    width: 80px;
                    position: absolute;
                    top: 5px;
                    left: 10px;
                    z-index: -1;
                    clip-path: polygon(51% 0%, 100% 27%, 100% 70%, 50% 98%, 0% 70%, 0% 27%);
                }
            }

            .player-name {
                color: aliceblue;
                font-size: 14px;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
            }
        }

        &:nth-child(1) {
            order: 2;
            align-items: start;

            .badge {
                height: (132px + 126 * 0.15);
                width: (112px + 112 * 0.15);

                .player-avatar {
                    height: (100px + 100 * 0.15);
                    width: (100px + 100 * 0.15);
                }
            }
        }

        &:nth-child(2) {
            order: 1;

            .badge {
                height: 104px;
                width: 100px;
            }
        }

        &:nth-child(3) {
            order: 3;
        }
    }
}
</style>